<div class="row">
  <div class="step-wrapper medium-10 medium-centered large-10 large-centered column">
    <div class="stpy large-12 column">

      <div class="step-statement medium-3 large-4 columns">
        <h5>User Registration</h5>
        <p>Find Collegues in behomebased.ph </p>
      </div>  

      <div class="stepbystep medium-9  large-8 columns">
        <div class="right ui ordered  small steps">
          <div class="completed step">
            <div class="content">
              <div class="title"></div>
              <div class="description">Basic Information</div>
            </div>
          </div>

          <div class="completed step">
            <div class="content">
              <div class="title"></div>
              <div class="description">Address</div>
            </div>
          </div>
          <div class="animated slideInRight completed step">
            <div class="content">
              <div class="title"></div>
              <div class="description">Education</div>
            </div>
          </div>
          <div class="disabled step">
            <div class="active">
              <div class="title"></div>
              <div class="description">Work Experience</div>
            </div>
          </div>         
        </div>
      </div>

      <div class="hr-reg large-12 column"><hr></div>

      <div class="large-12 column" style="padding:0;">
      <div class="reg-left-wrap large-6 column">
        <div class="large-4 column">
          <select id="type">
            
            <option "<?php if($work_experience[0]->client_type == 'Company') echo 'selected';?>">Company</option>
            <option "<?php if($work_experience[0]->client_type == 'Client') echo 'selected';?>">Client</option>
          </select>
        </div>
        <div class="reg-left reg-bot large-8 column">
              <input placeholder="" tabindex="0" id="skills-auto" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" class="radius select2-input" type="text" style="width:100%;">
        </div>
        <div class="reg-left reg-bot large-12 column">
          <select id="workdescription" style="width:100%;">
            <option></option>
            <option value="">Web Developer</option>
            <option value="">Web Designer</option>
            <option value="">Mobile App Developer</option>
            <option value="">Graphic Designer</option>
            <option value="">Graphic Artist</option>
            <option value="">Staffing Consultant</option>
            <option value="">UX/UI Designer</option>
            <option value="">Writer</option>
            <option value="">Virtual Assistants</option>
            <option value="">Customer Service Agents</option>
            <option value="">Sales and Marketing Expert</option>
            <option value="">Accountants</option>
            <option value="">Consultants</option>
          </select>
        </div>
        <div class="reg-left reg-bot large-6 column" style="padding-right:.5rem !important;">
                  <select id ="workStarted" name="workStarted" >
                      <option value="0000"<?php echo $workStarted == '0000' ? 'selected="selected"' : ''; ?>>Year Started</option>
                        <?php
                        for($i=date('Y'); $i>1899; $i--) {
                            $selected = '';
                            if ($workStarted == $i) $selected = ' selected="selected"';
                            print('<option value="'.$i.'"'.$selected.'>'.$i.'</option>'."\n");
                        }
                        ?>
                  </select>       
        </div>
        <div class="reg-left reg-bot large-6 column" style="padding-left:.5rem !important;">
                  <select id="workEnded" name="workEnded" >
                      <option value="0000"<?php echo $workEnded == '0000' ? 'selected="selected"' : ''; ?>>Year Ended</option>
                      <option value="">Present</option>
                        <?php
                        for($i=date('Y'); $i>1899; $i--) {
                            $selected = '';
                            if ($workEnded == $i) $selected = ' selected="selected"';
                            print('<option value="'.$i.'"'.$selected.'>'.$i.'</option>'."\n");
                        }
                        ?>
                  </select>            
        </div>
      </div>
      <div class="large-6 column">
        
      </div>
      <div class="btn-save text-right medium-4 large-12 columns">
        <a id="btnFinish" type='submit' class="button">Finish</a>
      </div>

      </div>

    </div>
  </div>
</div>
<style>
body {
  background: #F5F5F5 !important;
}
</style>




<script>
  $(document).ready(function() {
    var names = "<?= $names ?>";
    var company = "<?= $work_experience[0]->company ?>";
    var description = "<?= $work_experience[0]->work_description ?>";
    var workStarted = "<?= $work_experience[0]->work_started ?>";
    var workEnded = "<?= $work_experience[0]->work_ended ?>";
    $("#skills-auto").val(company).select2({
      tags: names.split(','),
      maximumSelectionSize: 1,
      placeholder: "Company Name"
    });

    $("#workdescription").val(description).select2({
      placeholder: "Work Description",
      allowClear: true
    });
    $('#workdescription').select2("data",{id:1,text:description});
    if(workStarted) $('#workStarted').val(workStarted);
    if(workEnded) $('#workEnded').val(workEnded);
    
  });


  $('#btnFinish').click(function(){
      var company = $('#skills-auto').val();
      var work_description = '';
      var client_type = $('#type').val();
      var work_started = '';
      var work_ended = '';


      
      if($('#workdescription').select2('data')) work_description = $('#workdescription').select2('data').text;

      if($('#workStarted').val() != '0000') work_started = $('#workStarted').val();
      if($('#workEnded').val() != '0000') work_ended = $('#workEnded').val();

      var data = [];
      var work_experience = {};
      work_experience.company = company;
      work_experience.work_description = work_description;
      work_experience.client_type = client_type;
      work_experience.work_started = work_started;
      work_experience.work_ended = work_ended;
      data[data.length] = work_experience;

      $.ajax({
          url: URL + 'registration/save/step_4',
          data: {exp:data},
          dataType: 'json',
          type: 'post',
          success: function(result){
            console.log(result);
          }
      });
      
      window.location.replace(URL);
  });
</script>





